<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <h4>面试知识点</h4>
    <ul>
        <li>
            <div>vue生命周期（有keep-alive）</div>
            <ul>
                <li>父beforeCreate</li>
                <li>父created</li>
                <li>父beforeMount</li>
                <li>子beforeCreate</li>
                <li>子created</li>
                <li>子beforeMount</li>
                <li>子mounted</li>
                <li>父mounted</li>
                <li>子activated</li>
                <li>父activated</li>
            </ul>
        </li>
        <li>
            <div>vue-router生命周期</div>
            <ul>
                <li>beforeRouteLeave</li>
                <li>beforeEach</li>
                <li>beforeRouteUpdate</li>
                <li>beforeEnter</li>
                <li>beforeRouteEnter</li>
                <li>beforeResolve</li>
                <li>afterEach</li>
                <li>调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。</li>
            </ul>
        </li>
    </ul>
</section>
<section></section>
<section>
    <h4>vue面试题</h4>
    <ul>
        <li>vue生命周期</li>
        <li>vue生命周期（加上keep-alive，顺序是怎样？）</li>
        <li>vue生命周期（加上路由的生命周期，顺序是怎样？）</li>
        <li>vue组件的通信方式</li>
        <li>vue中v-if和v-for的优先级</li>
        <li>vue中对key的理解，有什么作用？</li>
        <li>vue中$nextTick的理解？</li>
        <li>vue的指令和{{}}是如何防止xss攻击的</li>
        <li>
            组件中写name有哪些好处
            <ol>
                <li>可以自己调用自己</li>
                <li>通过name找组件</li>
            </ol>
        </li>
        <li>
            vue的use会做些什么操作
            <ol>
                <li>看对象还是函数</li>
                <li>Vue.use为了统一使用vue版本</li>
            </ol>
        </li>
        <li>vue为何要use Router, Vuex</li>
        <li>proxy 和 defineProperty</li>
        <li>Vue.observable 和 Vue.set</li>
        <li>直接给对象的某个不存在的值复值，界面会刷新？</li>
        <li>
            slot是如何实现的，什么时候使用它？
            <ol>
                <li>匿名插槽（children -> vnode的componentOptions -> vm.$options._renderChildren -> $slots -> $scopedSlots）</li>
                <li>匿名插槽（slot标签 -> _t -> renderSlot(在$scopedSlots找到default虚拟dom)）</li>
                <li>具名插槽（同匿名插槽，多个名字而已）</li>
                <li>作用域插槽（scopeSlots:_u -> resolveScopedSlots -> scopedSlots）</li>
                <li>作用域插槽（slot标签 -> _t -> renderSlot(在$scopedSlots找到default，执行函数传入参数得到虚拟dom)）</li>
            </ol>
        </li>
        <li>有使用过keep-alive？生命周期会有什么变化？</li>
        <li>有使用过$route，有了$route，$route和生命周期，它会在那个时刻执行</li>
        <li>双向绑定数据原理</li>
        <li>v-model 和 sync区别</li>
        <li>
            <ol>
                <li>v-if和v-for的优先级</li>
                <li>Vue的data选项为什么是函数，而Vue的根实例没有这个限制</li>
                <li>vue中的key有什么作用</li>
                <li>vue中diff算法的理解</li>
                <li>vue中组件化的理解</li>
                <li>vue的设计原则理解</li>
                <li>mvc和mvp和mvvm的理解</li>
                <li>
                    vue优化
                    <ol>
                        <li>路由按需加载</li>
                        <li>keep-alive缓存页面</li>
                        <li>v-show和v-if的使用</li>
                        <li>v-for和v-if的优先级</li>
                        <li>
                            长列表性能优化
                            <ol>
                                <li>如果数据很多，不会任务变化，就不要响应式,使用object.freeze(users)冻结</li>
                                <li>采用虚拟滚动(vue-virtual-scroller vue-virtual-scroll-list)</li>
                            </ol>
                        </li>
                        <li>css 是否需要加scope</li>
                        <li>vue-fragment 不要用在路由中</li>
                        <li>动态缓存</li>
                        <li>事件销毁</li>
                        <li>图片懒加载(vue-lazyload)</li>
                        <li>第三方插件按需引入</li>
                        <li>无状态组件</li>
                        <li>组件分割</li>
                        <li>计算属性computed</li>
                        <li>
                            SSR
                            <ol>
                                <li>服务端的优化策略</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li>
                    vue3新特性
                    <ol>
                        <li>
                            更快
                            <ol>
                                <li>虚拟dom重写</li>
                                <li>优化slots生成</li>
                                <li>静态树提升（静态节点提升）</li>
                                <li>静态属性提升（补丁标记和动态属性记录，patchFlag）</li>
                                <li>缓存事件处理程序</li>
                                <li>块</li>
                                <li>异步更新策略</li>
                                <li>基于proxy的响应式系统</li>
                                <li>patchFlag和shapeFlag</li>
                            </ol>
                        </li>
                        <li>
                            更小
                            <ol>
                                <li>摇树优化</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li>vuex的使用和理解</li>
                <li>
                    vue中组件的通信方式
                    <ol>
                        <li>props</li>
                        <li>$emit $on</li>
                        <li>$parent $children $root</li>
                        <li>ref</li>
                        <li>$attrs $listener</li>
                        <li>eventbus</li>
                        <li>vuex</li>
                        <li>provide/inject</li>
                    </ol>
                </li>
                <li>
                    vue-router中如何保护指定路由的安全
                    <ol>
                        <li>全局守卫 beforeEach、afterEach</li>
                        <li>路由独享守卫 beforeEnter</li>
                        <li>组建内守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave</li>
                    </ol>
                </li>
                <li>vue中的nextTick</li>
                <li>vue中响应式的理解</li>
                <li>
                    长列表渲染
                    <ol>
                        <li>js的主线程（包括GUI渲染线程和js引擎线程，它们是互斥的）是单线程，webworker虽然开启了一个线程，但也是不能操作dom</li>
                        <li>宏任务->微任务->浏览器刷新->宏任务->微任务->浏览器刷新.....</li>
                        <li>GUI渲染线程(浏览器刷新)</li>
                        <li>js引擎线程(宏任务、微任务)</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ul>
</section>
<section>
    <ul>
        <li>Observer 响应式(包括对象和数组)</li>
        <li>observe</li>
        <li>defineReactive</li>
        <li>Dep</li>
        <li>Watcher</li>
        <li>Compile 编译</li>
    </ul>
    <ul>
        <li>数据相应 observe->Observer</li>
        <li>编译 Compile，每个key产生一个update更新函数，产生Watcher，Watcher保存更新函数，产生Dep，Watch对象里面访问Obj[key]
            触发get方法，get方法里面的Dep搜集Watcher
        </li>
    </ul>
</section>
<script>
    // VueRouter
    class VueRouter {
        // static install() {}
    }

    VueRouter.install = function() {

    }

    // Vuex
    const vuex = {
        MyVuex() {},
        install() {}
    }
    // getter state
    // mutation state, args
    // action this, args
</script>
</body>
</html>
